<template>
  <div class="login-bg-box">
    <div class="login-bg-space"></div>
    <div class="bg-img-box">
      <transition-group name="list-complete">
        <template v-for="item in bgList" :key="item">
          <div class="bg-img-box-li list-complete-item">
            <n-collapse-transition :appear="true" :show="showBg">
              <img :src="item" alt="chart" />
            </n-collapse-transition>
          </div>
        </template>
      </transition-group>
    </div>
  </div>
</template>

<script lang="ts" setup name="login-bg-box">
  import { shuffle } from 'lodash-es'
  const showBg = ref(false)
  const shuffleTimer = ref(0)
  const bgList = ref([
    'bary',
    'barx',
    'linegradient',
    'line',
    'funnel',
    'heatmap',
    'map',
    'pie',
    'radar'
  ])
  //处理url
  bgList.value = bgList.value.map(
    (item) =>
      new URL(`../../../assets/images/charts/${item}.png`, import.meta.url).href
  )
  // 打乱
  const shuffleHandle = () => {
    shuffleTimer.value = setInterval(() => {
      bgList.value = shuffle(bgList.value)
    }, 4000)
  }
  onMounted(() => {
    setTimeout(() => {
      showBg.value = true
    })
    shuffleHandle()
  })
  onUnmounted(() => {
    clearTimeout(shuffleTimer.value)
  })
</script>

<style lang="less" scoped>
  .login-bg-box {
    // width: 30vw;
    z-index: 2;
    // position: fixed;
    width: 56vw;
    // height: 100vh;
    display: flex;
    justify-content: space-around;
    // margin-right: -20px;
    align-items: center;

    .login-bg-space {
      width: 30%;
    }
    .bg-img-box {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      width: 770px;
      margin-right: -20px;
      &-li {
        img {
          margin-right: 20px;
          margin-top: 20px;
          width: 230px;
          border-radius: 2 * @border-radius-base;
          opacity: 0.9;
        }
      }
    }
  }
</style>
